<template>
  <div id="yoso">

    <!--搜索框-->
    <search/>
    <!--主体-->
    <div id="main" class="format clearfix">
      <div id="commodity">
        <a href="javascript:void (0)"><img :src="commodity.photoPathList[0]" width="450px"
                                           @click="toCartAdd(commodity.id)"></a>

      </div>
      <div id="detail">
        <div><img src="../../../../static/img/single/h.png" alt=""></div>
        <div style="font-weight: 700"><span v-html="commodity.details"></span></div>
        <div style="font-size: 12px"><span style="color: red">【Swisse大牌闪购日】低至满399减150元 【入会享0元试用】首购好礼4选1</span><a
          href="#">【植萃护眼】缓解眼部疲劳，刷屏无压力</a>
        </div>
        <div id="price">
          <div style="font-size: 12px;">
            <span>价格:</span><span
            style="font-weight: bolder;color: red;font-size: 30px">￥{{commodity.price}}</span><span><a href="#">降价通知</a></span>
          </div>
          <div style="background: url('../../../../static/img/single/shui.png');height: 65px;margin-left: 0"></div>
        </div>
        <div style="margin-top: 50px">
          <div>
            <el-select v-model="color" placeholder="请选择颜色">
              <el-option :label="c.info" :value="c.tag" v-for="c in colorList" :key="c.id"></el-option>
            </el-select>
            <el-select v-model="size" placeholder="请选择尺寸">
              <el-option :label="s.info" :value="s.tag" v-for="s in sizeList" :key="s.id"></el-option>
            </el-select>
          </div>
            数量
            <el-input v-model="count" placeholder="请输入内容" style="width: 170px" type="number" :min="1"></el-input>
            <el-button type="danger" round @click="CartAdd">加入购物车</el-button>
            <el-button type="danger" round @click="toMyCart">我的购物车</el-button>
        </div>
        <div id="service">
          <ul>
            <li>服务</li>
            <li>正品保障</li>
            <li>京东配送</li>
            <li>售后保障</li>
            <li>全球品质</li>
          </ul>
        </div>
      </div>
    </div>

  </div>


</template>

<script>
  import Top from '../../common/Top'
  import Bottom from '../../common/Bottom'
  import Search from '../../common/Search'

  export default {
    name: "Single",
    components: {
      Top,
      Bottom,
      Search
    },
    data() {
      return {
        ma: true,
        user_top: false,
        login: false,
        count: 1,
        color: '',
        colorList: [],
        size: '',
        sizeList: [],
        user: {},
        commodity: {
          tags: ["级", "米饭"],
          photoPathList: ["http://localhost:3326/static/commodity/648109.png"]
        },
        key: '',
        hotwords: []
      }
    },
    methods: {
      CartAdd() {
        const flag = this.loginValid();
        if (!flag) {
          if (!window.confirm("您未登录,前往登录吗?")) {
            return
          }
          this.$router.push('/login')

          // this.$router.push('/cart/' + this.user.id)
        } else {
          this.$axios.post('/cart/saveOrUpdate',
            {
              "buyerId": this.user.username,
              "buyerName": this.user.name,
              "color": this.color,
              "commodityCode": this.commodity.code,
              "commodityName": this.commodity.name,
              "count": this.count,
              "price": this.commodity.price,
              "size": this.size,
              "subtotal": this.subtotal
            }
          )
            .then(resp => {
              if (resp.data.result) {
                this.$message.success(resp.data.message);
                this.$router.push('/cart')
              } else {
                this.$message.error(resp.data.message);
              }
            })
        }


      },
      search() {
        this.goods.forEach(g => {
          if (g.g_name === this.key) {
            this.$router.push('/commodity/' + g.g_id)
          }
        })
      },
      toMyCart() {
        const flag = this.loginValid();
        if (flag) {
          this.$router.push('/cart')
          return false;
        }
        if (window.confirm("您未登录,前往登录吗?")) {
          this.$router.push('/login')
        } else {
          return false;
        }
      },
      exit() {
        sessionStorage.removeItem('user');
        this.login = false;
      },
      paging() {
        this.$axios.post('/commodity/findById?id=' + this.$route.params.id)
          .then(resp => {
            this.commodity = resp.data.data;
          });
        this.loginValid();

      },
      loginValid() {
        const user = sessionStorage.getItem('user');
        if (user !== null) {
          this.user = JSON.parse(user);
          this.login = true
        }
        return user !== null
      },
      sizeChose(index){

      }
    },
    computed: {
      subtotal() {
        const price = this.commodity.price;
        const count = this.count;
        return price * count;
      }
    },
    created() {
      this.paging();
      //  获取颜色和 尺寸
      this.$axios.get('/commodity/getCommodityColorSize')
        .then(resp=>{
          let result = resp.data.data;
          this.colorList = result['商品颜色'];
          this.sizeList = result['商品尺寸']
        })
    }
  }
</script>

<style scoped>

</style>

<!--main-->
<style>
  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .clearfix {
    *zoom: 1;
  }

  .format {
    width: 1210px;
    margin: 0 auto;
  }

  #commodity {
    float: left;
    width: 450px;
    height: 450px;

  }

  #detail {
    text-align: left;
    border: 1px solid red;
    height: 550px;
    float: left;
    width: 590px;
  }

  #detail div {
    margin-left: 15px;
    margin-bottom: 20px;
  }

  #detail #price {
    margin: 0 auto;
    width: 525px;
    height: 125px;
    background-color: #f8f8f8;
  }

  #service {

  }

  #service ul li {
    float: left;
    font-size: 12px;
    margin: 10px;
  }

.sizeChose .colorChose span{
  font-size: 26px;
  padding: 6px 10px;
  border: 1px solid rgb(111, 111,111);
  margin-right: 6vw;
  color: rgb(111, 111, 111);

}
  .select:active{
    color:   #FFAA00;
    border-color:   #FFAA00;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

</style>


